<template>
	<div class="txt-pop">
		<div class="txt-header">
			<div class="txt-btn fl" @click="cancel">取消</div>
			<div class="txt-btn fr" @click="send">提交</div>
			{{title}}
		</div>
		<div class="txt-content">
			<textarea :placeholder="placeholder" :maxlength="maxlength" v-model="txt"></textarea>
			<p>{{maxlength - txt.length}}</p>
		</div>
	</div>
</template>
<script>
export default {
	name: 'txtPop',
	data() {
		return {
			txt: ''
		}
	},
	methods: {
		cancel() {
			this.txt = '';
			this.$emit('cancel');
		},
		send() {
			this.$emit('send', this.txt);
			this.txt = '';
		}
	},
	props: ['maxlength', 'title', 'placeholder']
}
</script>
<style lang='less' scoped>
.txt-pop {
	width: 100%;
	background: rgba(246, 246, 246, 1);
	font-size: 0.4rem;
	border-radius: 0.07rem;
	.txt-header {
		position: relative;
		height: 1rem;
		border-bottom: 1px solid #aaa;
		overflow: hidden;
		text-align: center;
		line-height: 1rem;
		padding: 0 .3rem;
		.txt-btn {
			color: #007AFF;
			font-size: .35rem;
		}
	}
	.txt-content {
		padding: .2rem .4rem .1rem;
		textarea {
			border: none;
			width: 100%;
			height: 2rem;
			resize: none;
			background: transparent;
			font-size: .35rem;
			max-height: 10000px;
		}
		p {
			color: #aaa;
			font-size: .3rem;
		}
	}
}
</style>